<template>
  <el-scrollbar height="100vh">
    <el-menu :default-active="defaultActive" :background-color="menuBgColor" :default-openeds="defaultOpened" :unique-opened="uniqueOpenedFlag" class="el-menu-vertical clearfix" :collapse="isCollapse" :style="{ width: isMobile ? 'auto' : '' }" :text-color="textColor" :active-text-color="activeTextColor" :mode="mode" @open="handleOpen" @close="handleClose" router>
      <div class="menu-logo">
        <img src="@/assets/img/logo.jpg" alt="" />
      </div>
      <MenuItem :menuList="routes" />
    </el-menu>
  </el-scrollbar>
</template>

<script>
export default {
  name: 'Menu',
}
</script>

<script setup>
import { defineProps, computed, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { themeConfig } from '@/config/theme'

import { setting } from '@/config/setting'
const { defaultOpeneds, uniqueOpened } = setting

const { themeOptions } = themeConfig
const store = useStore()
const router = useRouter()

defineProps({
  isCollapse: {
    type: Boolean,
    default: false,
  },
  mode: {
    type: String,
    default: 'vertical',
  },
})

const whiteColors = ['#fff', '#ffffff', '#FFF', '#FFF', 'rgb(255, 255, 255)']

const isMobile = computed(() => {
  return store.getters['setting/isMobile']
})

const uniqueOpenedFlag = ref(uniqueOpened)

const theme = computed(() => {
  return store.getters['setting/theme']
})

const menuBgColor = computed(() => {
  return themeOptions[theme.value].menuBgColor
})
const routes = computed(() => {
  return store.getters['routes/routes']
})
const defaultActive = computed(() => {
  const { fullPath } = router.currentRoute.value
  return fullPath || '/template'
})
onMounted(() => {
  defaultActive
  //   console.log(routes, '----routes--');
})

const isBlack = computed(() => {
  return whiteColors.indexOf(menuBgColor.value) === -1
})

const textColor = computed(() => {
  return whiteColors.indexOf(menuBgColor.value) !== -1 ? '#333' : '#fff'
})

const activeTextColor = computed(() => {
  const mcolor = whiteColors.indexOf(menuBgColor.value) !== -1
  return mcolor ? theme : '#fff'
})

const defaultOpened = computed(() => {
  return defaultOpeneds
})

const handleOpen = (key, keyPath) => {
  console.log('open:', key, keyPath)
}

const handleClose = (key, keyPath) => {
  console.log('close:', key, keyPath)
}
</script>

<style lang="scss" scoped>
.el-menu-vertical {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: none;
  @include base-scrollbar;
  &:not(.el-menu--collapse) {
    width: $base-menu-width;
  }
  .menu-logo {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
